<template>
    <div id="trade" class="trade"></div>
</template>

<script>
export default {
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            const chart = this.$echarts.init(document.getElementById('trade'));
            const options = {
                title: {
                    text: '进出口贸易',
                    textStyle: {
                        color: 'rgb(85, 85, 85)',
                        fontSize: 14,
                        fontWeight: 100
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    },

                    formatter(params) {
                        let relVal = params[0].name
                        for (var i = 0, l = params.length; i < l; i++) {
                            // console.log(params)
                            let circle = `<i class="iconfont icon-yuan" style="margin-right:4px;font-size:14px;color:${params[i].color}"></i>`
                            params[i].value = Math.abs(params[i].value)
                            relVal += '<br/>' + circle + params[i].seriesName + ' : ' + params[i].value + '万亿'
                        }
                        return relVal
                    }
                },
                legend: {
                    data: ['商品出口总额（美元）', '商品进口总额（美元）'],
                    left: 'center',
                    bottom: '2%',
                    show: true,
                    type: 'scroll',

                },
                grid: {
                    left: '3%',
                    right: '9%',
                    bottom: '60',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        // 设置x轴线的属性
                        axisLine: {
                            lineStyle: {
                                color: '#888'
                            }
                        },
                        axisLine: {
                            show: true,
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLabel: {
                            formatter(value) {
                                return Math.abs(value)
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        // 设置y轴线的属性
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        data: this.trade.datax
                    }
                ],
                color: ['#4a8b28', '#d72b2b'],
                series: [
                    {
                        name: '商品出口总额（美元）',
                        type: 'bar',
                        stack: '总量',
                        barMaxWidth: '22',

                        label: {
                            normal: {
                                show: true,
                                color: 'inherit',
                                align: 'left',
                                position: 'right',
                                // 自定义条形图上显示的文字
                                formatter(params) {
                                    let htmlStr = Math.abs(params.value) + '万亿'
                                    return htmlStr
                                }
                            }
                        },
                        data: this.trade.datay
                    },
                    {
                        name: '商品进口总额（美元）',
                        type: 'bar',
                        stack: '总量',
                        barMaxWidth: '22',
                        label: {
                            normal: {
                                show: true,
                                color: 'inherit',
                                align: 'right',
                                position: 'left',
                                formatter(params) {
                                    let htmlStr = Math.abs(params.value) + '万亿'
                                    return htmlStr
                                }
                            }
                        },
                        data: this.trade.datay1
                    }
                ]
            };

            chart.setOption(options);
            window.onresize = function () {
                chart.resize()
            }
        }
    },
    props: ['trade']
}
</script>

<style lang="less" scoped>
.trade {
    padding-top: 5px;
    padding-left: 5px;
    width: 710px;
    height: 100%;
    background-color: #fff;
}
</style>